'use strict'
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
//import $ from 'jquery'

import {
    HttpService,
    Tips,
    countDown,
    weixinLogin
} from '../Tools'
import Header from './Common/Header'
import Footer from './Common/Footer'

import '../scss/buy.scss'

import imgBuy from '../Img/buy/buy3.png'
import imgCard from '../Img/buy/card.jpg'
import imgTc from '../Img/buy/tc.png'
import imgClock from '../Img/buy/clock.png'
import imgHome from '../Img/buy/home.png'
import imgHome2 from '../Img/buy/home2.png'
import imgOk from '../Img/buy/ok.jpg'
import imgRight from '../Img/buy/right.png'
import imgUser from '../Img/buy/user.png'
import imgUser2 from '../Img/buy/user2.png'
import imgUsers from '../Img/buy/users.png'
import imgUsers2 from '../Img/buy/users2.png'
import imgPhone from '../Img/buy/phone.png'
import imgPhone2 from '../Img/buy/phone2.png'
// import imgCard1 from '../Img/buy/card1.png'
// import imgCard2 from '../Img/buy/card2.png'

export default class Buy extends Component {

    constructor(props) {
        super(props);
        this.packagetype = sessionStorage.type;
        if (!sessionStorage.type)
            this.packagetype = [4, 2, 3][sessionStorage.index]
        console.log(this.packagetype);
        this.state = {
            stop: 0, //页面蒙版显示
            youhui: 0, //优惠是否
            priceStr: `￥${[0,365,365,408,338][this.packagetype]}元/年`, //价格字符串
            packagefee: 0,
            orderInfo: {
                schoolId: '',
                schoolName: ''
            },
            slt: {
                slt: 'slt',
                slted: 'slted'
            },
            imgList: {
                phone: '',
                user: '',
                users: ''
            },
            submit: 0
        }
    }

    componentWillmount() {
        if (localStorage.back == 'true') {
            delete localStorage.back
            Tips('重新提交订单', -1)
            this.setState({
                top: 0
            })
        }
    }

    componentDidMount() {
        this.refs.banji.value = sessionStorage.stubanji || '';
        this.refs.name.value = sessionStorage.stuname || '';
        this.refs.phone.value = sessionStorage.stuphone || '';
        sessionStorage.index = sessionStorage.index ? sessionStorage.index : 0
    }
    componentWillUnmount() {
        sessionStorage.stubanji = this.refs.banji.value;
        sessionStorage.stuname = this.refs.name.value;
        sessionStorage.stuphone = this.refs.phone.value;
    }

    //手机号检查
    // phoneCheck() {
    //     const phone = this.refs.phone.value;
    //     if (phone.length < 11) {
    //         sessionStorage.phoneOk = 0;
    //         return;
    //     }
    //     if (!/^1[34578]\d{9}$/.test(phone)) {
    //         Tips('请填写重庆地区的中国移动号码');
    //         sessionStorage.phoneOk = 0;
    //         return;
    //     }
    //     let url = 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm' +
    //     '?tel=' + phone + '&callback=?';
    //     $.ajax({
    //         url: url,
    //         dataType: 'jsonp',
    //         type: 'get',
    //         success: function(data) {
    //             if (data.province == '重庆') {
    //                 sessionStorage.phoneOk = 1;
    //             } else {
    //                 sessionStorage.phoneOk = 0;
    //                 Tips('请填写重庆地区的中国移动号码');
    //             }
    //         }
    //     });
    // }

    //提交数据
    buySmt(e) {
        e.preventDefault();
        const
            schoolid = this.props.params.schoolId,
            banji = this.refs.banji.value,
            name = this.refs.name.value,
            phone = this.refs.phone.value;

        if (schoolid == undefined) {
            Tips('请选择学校');
            return;
        }
        if (banji == '') {
            Tips('请填写班级');
            return;
        }
        if (banji.replace(/\s+/g, '').length > 12) {
            Tips('班级名称不超过12位');
            return;
        }
        if (name == '') {
            Tips('请填写学生姓名');
            return;
        }
        if (name.replace(/\s+/g, '').length > 5) {
            Tips('学生姓名不超过5位');
            return;
        }
        if (phone == '') {
            Tips('请填写联系手机号');
            return;
        }
        if (!/^1[34578]\d{9}$/.test(phone)) {
            Tips('请填写正确手机号');
            return;
        }
        Tips('正在提交订单...', 0);
        this.setState({
            stop: 1
        });
        let rct = this;
        // let smartcardprice = [0,365,365,408,338][this.packagetype]
        // let cqpurchasetype = sessionStorage.index == 0 ? 2 : 3
        // if (sessionStorage.type == 1)
        //     cqpurchasetype = 1

        HttpService.query({
            url: '/apph5/device/cqSpecialPachagePurchase',
            data: {
                schoolid,
                classname: banji,
                studentname: name,
                telephone: phone,
                smartcardprice: [0, 365, 365, 408, 338][this.packagetype] + '00',
                cqpurchasetype: this.packagetype
            },
            success: function(res) {
                if (!/micromessenger/.test(navigator.userAgent.toLowerCase())) {
                    Tips('请在微信端打开支付');
                    rct.setState({
                        stop: 0
                    });
                    return;
                }
                if (res.code == 30025) {
                    localStorage.back = true
                    const appid = 'wx85577a457cfcd222',
                        redirect_uri = 'https://wx.17find.com/thirdparty/weixin/getcode',
                        state = res.data;
                    weixinLogin(appid, redirect_uri, state);
                    return;
                } else {
                    Tips(res.msg);
                    rct.setState({
                        stop: 0
                    });
                }
            }
        })
    }

    //文本框操作
    txtHandle(txtName, sign) {
        let imgList = {};
        let color = '#333';
        if (sign == 2)
            color = '#c9c9ca';
        switch (txtName) {
            case 'phone':
                imgList.phone = sign == 2 ?
                    '' :
                    imgPhone2;
                this.refs.phone.style.color = color
                break;
            case 'name':
                imgList.user = sign == 2 ?
                    '' :
                    imgUser2;
                this.refs.name.style.color = color
                break;
            default:
                imgList.users = sign == 2 ?
                    '' :
                    imgUsers2;
                this.refs.banji.style.color = color
                break;
        }
        this.setState({
            imgList
        });
    }

    //图片上传的label
    lblClick(e) {
        if (this.props.params.schoolId == undefined) {
            Tips('先选择学校');
            e.preventDefault();
        }
    }
    //图片上传的表单
    // upLoadImg(inputId, imgId) {
    //     Tips('正在上传图片，请稍后...', 0)
    //     let rct = this;
    //     rct.setState({stop: 1});
    //     imgUpload({
    //         inputId, imgId, imgIeId: imgId,
    //         //scale: '1:1',
    //         //width:200,
    //         //height: 888
    //         size: 5
    //     }, function(status, msg) {
    //         rct.setState({stop: 0});
    //         if (status) {
    //             if (inputId == 'upcard1') {
    //                 rct.front = msg;
    //                 Tips('身份证正面照已上传');
    //             } else {
    //                 rct.back = msg;
    //                 Tips('身份证反面照已上传');
    //             }
    //         } else {
    //             Tips(msg);
    //             if (inputId == 'upcard1') {
    //                 document.getElementById('upimg1').src = imgCard1;
    //             } else {
    //                 document.getElementById('upimg2').src = imgCard2;
    //             }
    //         }
    //     });
    // }

    render() {
        const {
            priceStr,
            packagefee,
            youhui,
            stop,
            slt,
            imgList,
            orderInfo,
            submit
        } = this.state
        const {
            schoolId,
            schoolName,
            schoolAddress
        } = this.props.params
        return (
            <div className='buybox'>
                <Header title='填写订单' toLink='/' />
                {/*id='showDataForm'*/}
                <form onSubmit={this.buySmt.bind(this)} id='frmbuy' method='post' enctype='multipart/form-data' >
                    <div className='item itmtop' id='schooltips'>
                        <p className='clearfix'>
                            <span className='left'>请正确选择学校名称</span>
                            <span className='right'>客户热线：<a href='tel:4008273366'>400-827-3366</a>
                            </span>
                        </p>
                    </div>
                    <div className='item itmtop'>
                        <img className='mark' src={imgBuy}/>
                        <div className='clearfix mkword'>
                            <span className='left'>随寻智能学生证</span>
                            <span className='right'>{priceStr}</span>
                        </div>

                    </div>
                    <div className='title'>配送信息</div>
                    <div className='item clearfix mbpx item2'>
                                <img className='mark' src={imgHome}/>
                                <Link id='sltschool' to={'/school/' + schoolId + '/' + encodeURI(schoolName) + '/' + encodeURI(schoolAddress)} className='sltsch left'>{schoolId
                                        ? decodeURI(schoolName)
                                        : '请选择学校'}</Link>
                                <img className='mark mark3' src={imgRight}/>
                            </div>

                    <div className='item mbpx'>
                        {imgList.users
                            ? <img className='mark' src={imgList.users}/>
                            : <img className='mark' src={imgUsers}/>}
                        <input type='text' placeholder='填写班级  例：3年级2班' ref='banji' onFocus={this.txtHandle.bind(this, 'banji', 1)} onBlur={this.txtHandle.bind(this, 'banji', 2)}/>
                    </div>
                    <div className='item mbpx'>
                        {imgList.user
                            ? <img className='mark' src={imgList.user}/>
                            : <img className='mark' src={imgUser}/>}
                        <input type='text' placeholder='填写姓名  例：张小明' ref='name' onFocus={this.txtHandle.bind(this, 'name', 1)} onBlur={this.txtHandle.bind(this, 'name', 2)}/>
                    </div>
                    <div className='item'>
                        {imgList.phone
                            ? <img className='mark mkphone' src={imgList.phone}/>
                            : <img className='mark mkphone' src={imgPhone}/>}

                        <input type='tel' placeholder={sessionStorage.type == 1||(!sessionStorage.type&&sessionStorage.index == 0)?'家长手机号':'家长手机号（大重庆内中国移动手机号）'} ref='phone' onFocus={this.txtHandle.bind(this, 'phone', 1)} onBlur={this.txtHandle.bind(this, 'phone', 2)}/>
                    </div>
                    {/*<div className='title'>实名认证<span>请上传家长本人身份证正反两面(含信息页和国徽页)</span>
                    </div>
                    <div className='item cardbox clearfix'>
                        <label for="upcard1" className='left' onClick={this.lblClick.bind(this)}>
                            <img id='upimg1' src={imgCard1}/>
                            <input className='upcard' name='front' type="file" id="upcard1" accept="image/*" onChange={this.upLoadImg.bind(this, 'upcard1', 'upimg1')}/>
                        </label>

                        <label for="upcard2" className='right' onClick={this.lblClick.bind(this)}>
                            <img id='upimg2' src={imgCard2}/>
                            <input className='upcard' name='back' type="file" id="upcard2" accept="image/*" onChange={this.upLoadImg.bind(this, 'upcard2', 'upimg2')}/>
                        </label>
                    </div>
                    <div className='item authenbox'>
                        <h5>证件图片要求：</h5>
                        <ul>
                            <li>1、证件拍摄完整，不出现缺角</li>
                            <li>2、各项信息及头像清晰可见，容易识别</li>
                            <li>3、证件必须真实拍摄，不能使用复印件</li>
                            <li>4、图片中无反光、无遮挡、无水印、无LOGO等情况</li>
                            <li>5、图片大小限制：5MB</li>
                        </ul>
                    </div>*/}
                    <div className='dnbotm'>
                        <input type='submit' id='buybtn' className='youhui0' value='提交订单' />
                    </div>
                </form>
                {stop == 1
                    ? <div className='mask'></div>
                    : ''
}
            </div>
        )
    }
}
